import { Row, Col } from "antd";
import { useModel, useLocation } from "umi";
import { Card as SemiCard, ButtonGroup, Button, List } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle } from "@douyinfe/semi-icons";
import { useEffect } from "react";

import useRoles from "../hooks/useRoles";

import ApplicationTable from "../components/application/table";

const OrganizationLayout = () => {
    const { windowInnerHeight } = useModel("global");
    const { roleLoading, loadRoles, roles, selectedRole, setSelectedRole } = useRoles();
    const { appLoading, loadRoleApplications, applications } = useRoles();
    const { state } = useLocation();

    const loadData = () => {
        loadRoles({ roleName: state?.roleName || null, order: ["oiName", 1] });
    };

    useEffect(() => {
        loadData();
    }, []);

    const loadApplications = () => {
        loadRoleApplications(selectedRole);
    };

    useEffect(() => {
        selectedRole && loadApplications();
    }, [selectedRole]);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <Row gutter={10} style={{ padding: 10 }}>
            <Col span={4}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>角色列表</span>}
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    size="default"
                    bodyStyle={{ padding: 1, height: cardBodyHeight, overflow: "auto" }}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconPlusCircle />}></Button>
                            <Button icon={<IconRefresh />} onClick={loadData}></Button>
                        </ButtonGroup>
                    }
                >
                    <List
                        loading={roleLoading}
                        dataSource={roles}
                        renderItem={(item, index) => (
                            <List.Item key={index} className={`list-item ${selectedRole === item ? "list-item-selected" : ""}`} main={item} onClick={() => setSelectedRole(item)}></List.Item>
                        )}
                    />
                </SemiCard>
            </Col>

            <Col span={20}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 16 }}>{selectedRole} - 应用列表</span>}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconRefresh />} onClick={loadApplications}></Button>
                        </ButtonGroup>
                    }
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 0, height: cardBodyHeight }}
                >
                    <ApplicationTable appLoading={appLoading} applications={applications} reloadData={loadApplications} cardBodyHeight={cardBodyHeight} />
                </SemiCard>
            </Col>
        </Row>
    );
};

export default OrganizationLayout;
